<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>红包分享</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="__INDEX__/js/mui.min.js"></script>
	    <link href="__INDEX__/css/mui.min.css" rel="stylesheet"/>
		<link rel="stylesheet" href="__INDEX__/store/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/store/css/newsj.css" />
		<style type="text/css"> 
		    .hbfx_ewmbox .payment_erweima{
		    	width: 170px;
		    	height: 160px;
		    }
		    .hbfx_ewmbox .erweimabox{
		    	width: 180px;  
		    } 
		    .hbfx_ewmbox{
		    	padding-bottom: 0rem;
		    }
		   
		</style>
		<!--[if lt IE 9]> 
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]--> 
	</head>

	<body class="sjindexcon">
		<header class="mui-bar mui-bar-nav hb_bar_nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">红包分享</h1>
		</header>
		<div class="mui-content sjindexcon" style="position: fixed;">
			<div class="hbfx_conbox">
				<div class="hbfx01"><img src="__INDEX__/store/images/hbfx01.jpg"></div>
				<div class="hbfx_ewmbox">
					<div class="erweimabox">
						<div class="payment_erweima"  >
							<div id="qrcode" >
								 
							</div>
						</div>
						<div class="tip">打开微信[扫一扫]</div>
					</div>
				</div>				
				<div><img src="__INDEX__/store/images/hbfx03.jpg"></div>
			</div>
			<a class="hbp_btn hbfx_btn"  onclick="savepic()" style="color: white;">点击保存图片</a>
		</div>
		<div id ='cut_img'></div>
	</body>
</html>
<script src="__PUBLIC__/static/js/jquery.min.js "></script>
<link rel="stylesheet " href="__PUBLIC__/static/layui/css/layui.css ">
<script src="__PUBLIC__/static/layui/layui.all.js "></script>
<script src="__PUBLIC__/static/js/help.js "></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js "></script>
<script type="text/javascript" src='__PUBLIC__/static/js/html2canvas.js'></script> 
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/zepto-1.1.6.min.js"></script> 
<script>
	var index = layer.load(0, {shade: false,time: 2 * 1000});
	$(".layui-layer-loading").css("left", "50%");
	var url = "{$code_url}"; 
	 $("#qrcode").qrcode({
        render 		: "canvas",    		//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text 		: url,    		//扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width 		: "160",    	//二维码的宽度
        height 		: "160",    	//二维码的高度
        background 	: "#ffffff",    //二维码的后景色
        foreground 	: "#000000",    //二维码的前景色
    });
    
	

	
/*下载图片*/
function savepic() {
	html2canvas($(".hbfx_conbox"), {
		onrendered: function (canvas) {
		    var url = canvas.toDataURL(); //base64数据
		    var image = new Image();
		    image.src = url;
		    image.id = 'div_img';
		    $('#cut_img').append(image);
		    var img_src = $('#div_img')[0].src;
				var type = 'png';
				// 下载后的问题名
				var filename = 'pic_' + (new Date()).getTime() + '.' + type;
				// download
				saveFile(img_src,filename);
		   }
		});
}

/**
 * 在本地进行文件保存
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>